<template>
	<div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{$store.state.company.companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>智能装备</el-breadcrumb-item>
				<el-breadcrumb-item>数字基地</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path:`/IntelligentEquipment/working/digitalBase?t=${new Date().getTime()}`}">物联网模块</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="tableNavBox">
			<div class="tableBoxTable" style="margin-bottom: 50px;">
				<div class="menberConTitle flex" style="justify-content: space-between;">
					<div class="tableTitle">物联网装备基本信息</div>
				</div>
				<formTemplate :formSet="formSet1" :postData="formData1" style="padding-left:28px" >
				</formTemplate>

				<div class="menberConTitle flex" style="justify-content: space-between;">
					<div class="tableTitle">模块通讯调试</div>
				</div>
				<formTemplate :formSet="formSet2" :postData="postData" :optionData="optionData" style="padding-left:28px">
					<!-- <template slot="portType" slot-scope="scope" >
						<el-form-item label="端口类型：" class="ment" style="width:460px">
							<el-checkbox-group v-model="postData.portType">
								<el-checkbox v-for="(item,index) in checkList" :label="item.label"  :key="index" >{{item.label}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
            		</template> -->
					<template slot="sign" slot-scope="scope" >
						<el-form-item label="信号强度：" class="ment" style="width:550px;">
							<img src="@/assets/image/xinhao.png" alt="" style="width:28px;height:28px;float:left;margin-right:50px">
							<el-button type="primary" style="width:80px;">调试</el-button>
						</el-form-item>
            		</template>
				</formTemplate>
				<div style="clear:both"></div>

				<div class="small_title">
					AI/AO端口配置
					<el-button type="primary" round size="mini" style="float: right;" @click="addAiAo">新增</el-button>
				</div>
				<el-table :data="postData.aiao" style="width: 100%;" border :header-cell-style="{background:'#FAFAFA'}">
					<el-table-column v-for="(item,index) in tableSet" :key="index" :prop="item.prop" :label="item.label">
						<template slot-scope="scope">
							<div v-if="item.type == 'button'">
								<el-button type="text" size=" " style="color:#23B54E" @click="del(scope.row)">测量</el-button>
								<el-button type="text" size=" " style="color:#FF0000" @click="deleteRow(scope.row, 'aiao', scope.$index)">删除</el-button>
							</div>
							<div v-else>{{ scope.row[item.prop] }}</div>
					    </template>
					</el-table-column>
				</el-table>
				<el-table :data="formData2.pageData" v-if="formData2.pageData.length > 0" style="width: 100%;" border :show-header="false" :header-cell-style="{background:'#FAFAFA'}">
					<el-table-column v-for="(item,index) in tableSet" :key="index" :prop="item.prop" :label="item.label">
						<template slot-scope="scope">
					        <el-input v-if="item.type == 'input'" :disabled="item.disabled" v-model="formData2.pageData[scope.$index][item.prop]" :placeholder="item.placeholder"></el-input>
							<el-select v-model="formData2.pageData[scope.$index][item.prop] " v-if="item.type == 'select'" placeholder="请选择">
							    <el-option label="AI" value="AI"> </el-option>
								<el-option label="AO" value="AO"> </el-option>
							  </el-select>
							<div v-if="item.type == 'switch'">
								<el-switch v-model="formData2.pageData[scope.$index][item.prop]" active-color="#13ce66" inactive-color="#C0C4CC"> </el-switch>
							</div>
							<div v-if="item.type == 'button'">
								<el-button type="text" size=" " style="color:#23B54E" @click="confirm(scope.row, 'aiao', scope.$index)">确定</el-button>
								<el-button type="text" size=" " style="color:#FF0000" @click="formData2.pageData.splice(scope.$index,1)">取消</el-button>
							</div>
					    </template>
					</el-table-column>
				</el-table>
				<!-- <tableForm :pageData="formData2.pageData" :data="tableSet" :addNew="false" :border="true">
				    <template slot="g" slot-scope="scope">
				    	<el-button type="text" size=" " style="color:#23B54E" @click="del(scope.row)">测量</el-button>
						<el-button type="text" size=" " style="color:#FF0000" @click="del(scope.row)">删除</el-button>
            	    </template>
				</tableForm> -->

				<div class="small_title" style="width: 50%;">
					DI/DO端口配置
					<el-button type="primary" round size="mini" style="float: right;" @click="addDiDo">新增</el-button>
				</div>
				<el-table :data="postData.dido" style="width: 50%;" border :header-cell-style="{background:'#FAFAFA'}">
					<el-table-column v-for="(item,index) in tableSet2" :key="index" :prop="item.prop" :label="item.label">
						<template slot-scope="scope">
							<div v-if="item.type == 'button'">
								<el-button type="text" size=" " style="color:#23B54E">测试</el-button>
								<el-button type="text" size=" " style="color:#FF0000" @click="deleteRow(scope.row, 'dido', scope.$index)">删除</el-button>
							</div>
							<div v-else-if="item.type == 'switch'">
								<el-switch v-model="scope.row[item.prop]" active-color="#13ce66" inactive-color="#C0C4CC"> </el-switch>
							</div>
							<div v-else>{{ scope.row[item.prop] }}</div>
					    </template>
					</el-table-column>
				</el-table>
				<el-table :data="formData2.pageData2" v-if="formData2.pageData2.length > 0" style="width: 50%;" :show-header="false" border :header-cell-style="{background:'#FAFAFA'}">
					<el-table-column v-for="(item,index) in tableSet2" :key="index" :prop="item.prop" :label="item.label">
						<template slot-scope="scope">
					        <el-input v-if="item.type == 'input'" :disabled="item.disabled" v-model="formData2.pageData2[scope.$index][item.prop]" :placeholder="item.placeholder"></el-input>
							<div v-if="item.type == 'switch'">
								<el-switch v-model="formData2.pageData2[scope.$index][item.prop]" active-color="#13ce66" inactive-color="#C0C4CC"> </el-switch>
							</div>
							<el-select v-model="formData2.pageData2[scope.$index][item.prop] " v-if="item.type == 'select'" placeholder="请选择">
							    <el-option label="DI" value="DI"> </el-option>
								<el-option label="DO" value="DO"> </el-option>
							  </el-select>
							<div v-if="item.type == 'button'">
								<el-button type="text" size=" " style="color:#23B54E" @click="confirm(scope.row, 'dido')">确定</el-button>
								<el-button type="text" size=" " style="color:#FF0000" @click="formData2.pageData2.splice(scope.$index,1)">取消</el-button>
							</div>
					    </template>
					</el-table-column>
				</el-table>
				<div style="clear:both"></div>
			</div>
		</div>
		<div class="btnBox" v-if="isDetail == false">
			<el-button type="primary" round @click="submitData">保存</el-button>
			<!-- <el-button type="danger" round>删除</el-button> -->
		</div>
	</div>
</template>

<script>
    import formTemplate from '@/components/form.vue'
	import tableForm from '@/components/tableForm.vue'
	export default {
		components: {
            formTemplate,
			tableForm
		},
		data() {
			return {
                formSet1:[
                    { span: 24, label: '清单大类名称：', prop: 'a', type: 'select',labelWidth:'550px'},
                    { span: 24, label: '清单小类名称：', prop: 'b', type: 'select' ,labelWidth:'550px'},
                    { span: 24, label: '清单设备名称：', prop: 'baseLocation2', type: 'select' ,labelWidth:'550px'},
                    { span: 24, label: '图像装备编号：', prop: 'baseLocation3', type: 'input' ,labelWidth:'550px'},
                ],
				formSet2:[
					{ span: 24, label: '通讯协议：', prop: 'connectionProtocol', type: 'select',labelWidth:'550px'},
                    { span: 24, label: '设备ID：', prop: 'idNumber', type: 'input' ,labelWidth:'550px'},
                    { span: 24, label: '巡检时间：', prop: 'time', type: 'input' ,labelWidth:'550px'},
                    { span: 24, label: '信号强度：', prop: 'sign', type: 'slot' ,labelWidth:'550px'},
                ],
				tableSet:[
					{ label: '端口类型', prop: 'portType', type: 'select', disabled:false,width:80},
					 { label: '端口编号', prop: 'portNumber', type: 'input', disabled:false,width:80},
					 { label: '对应名称', prop: 'correspName', type: 'input' , disabled:false,width:120},
					 { label: '小数位数', prop: 'smallNumber', type: 'input' , disabled:false,width:80},
					 { label: '映射', prop: 'mapping', type: 'input', disabled:false,width:250 },
					 { label: '单位', prop: 'unitName', type: 'input' , disabled:false,width:80},
					 { label: '偏置', prop: 'bias', type: 'input' ,width:80},
					 { label: '放大倍数', prop: 'magnification', type: 'input' ,width:80},
					 { label: '反馈', prop: 'feedback', type: 'input' ,width:80},
					 { label: '', prop: 'g', type: 'button' ,width:100},
				],
				tableSet2:[
					{ label: '端口类型', prop: 'portType', type: 'select', disabled:false,width:80},
					 { label: '端口编号', prop: 'portNumber', type: 'input', disabled:false},
					 { label: '对应名称', prop: 'correspName', type: 'input' , disabled:false},
					 { label: '反馈', prop: 'switchStatus', type: 'switch' , disabled:false},
					 { label: '', prop: 'g', type: 'button' ,width:100},
				],
				optionData:{
					connectionProtocol:[{name: 'MB RTU',value: 'MB RTU'}],
					contacts:[]
				},
                formData1:{}, // 客户选择数据
				// 需要提交的数据
				postData: {
					baseId: '',  // 基地id
					equipName: '', // 设备名称
					number: '', // 编号
					connectionProtocol: '', // 连接协议
					serialNumber: '', // 序列号
					portType: [], // 端口类型
					idNumber: '', // ID号
					dropDelay: '', // 掉线延迟
					recommendValue: '', // 推荐值
					switchStatus: false, // 连接开关状态：0开启，1关闭
					aiao: [], // aiao
					dido: [] // dido
				},
				
				formData2:{
					pageData:[],
					pageData2:[]
				},
				companyId: this.$store.state.company.companyId,
				companyName: this.$store.state.company.companyName,
				// postData: {
				// 	baseName: '', // 公司ID
				// 	baseLocation: '',
				// 	latitude:'',
				// 	departmentId:'',
				// 	contacts:'',

				// },
				isDetail:false,
			}
		},
		created() {
			
		},
		mounted() {
			console.log(this.$route.query)
			if(this.$route.query){
				this.formData1 = this.$route.query
				this.postData.baseId = this.formData1.base
				if(this.formData1.internetId){
					this.getInternetData()
					this.isDetail = true
				}
			}
			
		},
		watch: {
			
		},
		methods: {
			getInternetData(){
				this.$request.get(this.$napi.queryInternetList, {
					id: this.formData1.internetId,
					baseId: this.formData1.base,
					page: this.pageNum,
					pageSize: $globalData.pageSize
				}).then(res=>{
					if(res.code == 200){
						let data = res.data.items[0]
						this.postData.equipName = data.equipName
						this.postData.number = data.number
						this.postData.connectionProtocol = data.connectionProtocol
						this.postData.serialNumber = data.serialNumber
						this.postData.portType = data.portType
						this.postData.dropDelay = data.dropDelay
						this.postData.switchStatus = data.switchStatus == 0 ? true : false
						this.postData.aiao = data.aiao&&data.aiao.length > 0 ?data.aiao:[]
						this.postData.dido = data.dido&&data.dido.length > 0 ?data.dido:[]
						this.postData.dido.forEach(v=>{
							if(v.switchStatus == 0){
								v.switchStatus = true
							} else {
								v.switchStatus = false
							}
						})
						this.postData.aiao.forEach(v=>{
							if(v.switchStatus == 0){
								v.switchStatus = true
							} else {
								v.switchStatus = false
							}
						})
						this.postData.idNumber = data.idNumber
					}
				})
			},
			submitData(){
				// 新增保存
				let data = this.postData
				if(data.switchStatus){
					data.switchStatus = 0
				} else {
					data.switchStatus = 1
				}
				data.dido.forEach(v=>{
					if(v.switchStatus){
						v.switchStatus = 0
					}  else {
						v.switchStatus = 1
					}
				})
				data.aiao.forEach(v=>{
					if(v.switchStatus){
						v.switchStatus = 0
					}  else {
						v.switchStatus = 1
					}
				})
				// data.aiao = JSON.stringify(data.aiao)
				// data.dido = JSON.stringify(data.dido)
				// console.log(JSON.stringify(this.postData))
				// return
				this.$request.postJson(this.$napi.saveInternet, this.postData).then(res=>{
					if(res.code == 200){
						this.$message.success('新增成功')
						this.$router.back()
					}
				})
				// return
				// this.$request.postForm(this.$napi.saveInternet, {
				// 	json: JSON.stringify(this.postData)
				// }).then(res=>{
				// 	if(res.code == 200){
				// 		this.$message.success('新增成功')
				// 	}
				// })
			},
			confirm(row, type){
				// 确定新增
				let postUrl = ''
				if (type === 'aiao') {
					if(!this.isDetail){
						this.postData.aiao.push(row)
					}
					// this.getInternetData()
					postUrl = this.$napi.saveAiAo
					this.formData2.pageData = []
				} else if (type === 'dido'){
					if(!this.isDetail){
						this.postData.dido.push(row)
					}
					postUrl = this.$napi.saveDiDo
					this.formData2.pageData2 = []
				}
				row.internetId = this.formData1.internetId
				if(this.isDetail){
					row.switchStatus = row.switchStatus? '0' : '1'
					this.$request.get(postUrl, row).then(res=>{
						if(res.code == 200){
							this.$message.success('保存成功')
							this.getInternetData()
							// this.$router.back()
						}
					})
				}
			},
			deleteRow(row, type, i){
				let postUrl = ''
				if (type === 'aiao') {
					this.postData.aiao.splice(i, 1)
					postUrl = this.$napi.removeAiAo
					// this.formData2.pageData = []
				} else if (type === 'dido'){
					this.postData.dido.splice(i, 1)
					postUrl = this.$napi.removeDiDo
					// this.formData2.pageData2 = []
				}
				if(this.isDetail){
					this.$request.get(postUrl, {
						id: row.id
					}).then(res=>{
						if(res.code == 200){
							this.$message.success('删除成功')
							this.getInternetData()
							// this.$router.back()
						}
					})
				}
			},
			// 新增AI/AO
			addAiAo(){
				this.formData2.pageData.push({
					portNumber: '', // 端口编号
					correspName: '', // 对应名称
					smallNumber: '', // 小数位数
					mapping: '', // 映射
					unitName: '', // 单位
					bias: '', // 偏量
					magnification: '', // 放大倍数
					feedback: '' // 反馈
				})
			},
			// 新增DI/DO
			addDiDo(){
				this.formData2.pageData2.push({portNumber: '',correspName: '',switchStatus: false})
			}
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.breadcrumb >>>span{
		color: #23B14D;
		cursor: pointer;
	}

	.small_title{
		margin: 15px 0;
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		/* margin-top: 20px; */
	}

	.topButton {
		width: 78px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}

	.demo-form-inline {
		color: #5C5C5C;
	}

	.formInput {
		width: 500px;
	}

	.formInputNub {
		width: 100px;
		margin-right: 10px;
	}

	.formInputDatePicker {
		width: 440px;
		margin-right: 10px;
	}
	.dayNub {
		margin: 0 5px;
	}

	.btnBox {
		width: 100%;
		margin-top: 30px;
		padding: 30px 0;
		border-top: 1px solid #DCDCDC;
		text-align: center;
	}

	.btnBox button {
		width: 100px;
	}
	.expertTag{
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.locationBtn{
		width: 18px;height: 18px;position: relative;top: 7px;cursor: pointer;
	}
</style>
